<template>
  <div>
    <ul>
      <li v-for="item in person" :key="item.id">
        <h3>姓名是---{{item.name}}</h3>
        爱好是---<span v-for="i in item.hobby" :key="i">{{i}};</span>
      </li>
    </ul>

  </div>
</template>

<script>
// 创建并暴漏组件
export default {
  name: 'App',
  data() {
    return {
      person: [
        { id: 1, name: '老于', hobby: ['吃', '喝', 'piao'] },
        { id: 2, name: '坤坤', hobby: ['唱', '跳', 'rap'] },
        { id: 3, name: '婉丽', hobby: ['幽默', '风趣', '快乐'] },
        { id: 4, name: '老李', hobby: ['学习', '吃饭', '读书'] }
      ]
    }
  }
}
</script>

<style>
</style>